<template>
    <div class="logData">
        <div class="banner">
            <div class="title">{{guarantee.midxuc013}}</div>
        </div>
        <div class="logDate" v-for="(log_date,index_i) in devLogsDate">
            <div class="time">{{log_date}}</div>
            <div class="logList" v-for="(item,index_j) in devLogsInfo" v-if="log_date == item.log_date">
                <div class="flex">
                    <div class="button " v-bind:class="{ buttonWhite:item.backgroundImage == 1 ? true:false,buttonRed:item.backgroundImage == 2 ? true:false }">
                        <div class="left" v-if="item.type == 4">
                            <img class="img" src="../../assets/log04.png"/>
                            <span>{{item.msg}}</span>
                        </div>
                        <div class="left" v-if="item.type == 5">
                            <img class="img" src="../../assets/log05.png"/>
                            <span>{{item.msg}}</span>
                        </div>
                        <div class="left" v-if="item.type == 6">
                            <img class="img" src="../../assets/log06.png"/>
                            <span>{{item.msg}}</span>
                        </div>
                        <div class="left" v-if="item.type == 7">
                            <img class="img" src="../../assets/log07.png"/>
                            <span>{{item.msg}}</span>
                        </div>
                        <div class="left" v-if="item.type == 8">
                            <img class="img" src="../../assets/log08.png"/>
                            <span>{{item.msg}}</span>
                        </div>
                        <div class="left" v-if="item.type == 9">
                            <img class="img" src="../../assets/log09.png"/>
                            <span>{{item.msg}}</span>
                        </div>
                        <div class="right">{{item.log_time}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Dialog, Toast, Loading, Popup} from 'vant';
    import {post} from "../../js/utils";
    import {TenonWebsocket} from "../../js/websocket";
    import {parse21} from "../../js/parseData";
    import moment from 'moment';

    export default {
        name: 'LogData',
        components: {
            Dialog,
            vanLoading: Loading,
            vanPopup: Popup
        },
        data () {
            return {
                devId: this.$route.query.devId,
                guarantee: {},
                devLogs: [],
                devLogsDate: [],
                devLogsInfo: [],
            }
        },
        async created () {
            let ret = await post("/user/listGateways")
            let {devId} = this.$data;

            //获取本设备的保修卡
            ret.guarantee.map((item, index_i) => {
                //获取本设备的保修卡
                if (devId == item.Id) {
                    this.guarantee = JSON.parse(item.Info)
                }
            })

            //获取本设备的日志信息
            ret.devLogs.map((item, index_i) => {
                if (devId == item.DevId) {
                    this.devLogs.push(item);
                }
            })

            //获取本设备的日志信息的日期
            ret.devLogs.map((item, index_i) => {
                if (devId == item.DevId) {
                    let newInfo = this.parse(item.Info)
                    this.devLogsDate.push(newInfo.log_date);
                    this.devLogsInfo.push(newInfo);
                }
            })
            //去重,排序
            this.devLogsDate = [...new Set(this.devLogsDate)].sort(function(a,b){return b.localeCompare(a,'zh-CN')})
        },
        methods: {
            parse: function (data) {
                let change = parse21(data)
                let newData = {msg: '', log_time: '', type: 8, backgroundImage: 1};
                if (data.substr(0, 4) == '2101') { //门锁用户新增
                    let userType =
                        change.get("log_user_type") == 1 ? '管理员' :
                            change.get("log_user_type") == 2 ? '普通' :
                                change.get("log_user_type") == 3 ? '来宾' : '';
                    Object.assign(newData, {
                        msg: '新增' + userType + '用户' + change.get("log_user_id")
                    })
                } else if (data.substr(0, 4) == '2102') { //门锁用户删除
                    let userType =
                        change.get("log_user_type") == 1 ? '管理员' :
                            change.get("log_user_type") == 2 ? '普通' :
                                change.get("log_user_type") == 3 ? '来宾' : '';
                    Object.assign(newData, {
                        msg: '删除' + userType + '用户' + change.get("log_user_id")
                    })
                } else if (data.substr(0, 4) == '2104') { //开门
                    let userType =
                        change.get("log_user_type") == 1 ? '管理员' :
                            change.get("log_user_type") == 2 ? '普通' :
                                change.get("log_user_type") == 3 ? '来宾' : '';
                    let keyType =
                        change.get("log_key_type") == 1 ? '指纹' :
                            change.get("log_key_type") == 2 ? '密码' :
                                change.get("log_key_type") == 3 ? 'IC卡' : '';
                    let imgType =
                        change.get("log_key_type") == 1 ? 4 :
                            change.get("log_key_type") == 2 ? 5 :
                                change.get("log_key_type") == 3 ? 6 : 8;
                    Object.assign(newData, {
                        msg: userType + '用户' + change.get("log_user_id") + '通过' + keyType + '钥匙开门',
                        type: imgType,
                    })
                } else if (data.substr(0, 4) == '2103') { //修改密码
                    let userType =
                        change.get("log_user_type") == 1 ? '管理员' :
                            change.get("log_user_type") == 2 ? '普通' :
                                change.get("log_user_type") == 3 ? '来宾' : '';
                    Object.assign(newData, {
                        msg: userType + '用户' + change.get("log_user_id") + '修改了密码'
                    })
                } else if (data.substr(0, 4) == '2105') { //门锁报警
                    let warnType =
                        change.get("log_warn_type") == 1 ? '看门狗复位' :
                            change.get("log_warn_type") == 2 ? '掉电复位' :
                                change.get("log_warn_type") == 3 ? '复位键复位' :
                                    change.get("log_warn_type") == 4 ? '撬门' :
                                        change.get("log_warn_type") == 5 ? '震动' :
                                            change.get("log_warn_type") == 6 ? '低电量' :
                                                change.get("log_warn_type") == 7 ? '外部电源' :
                                                    change.get("log_warn_type") == 7 ? '非法钥匙' :
                                                        change.get("log_warn_type") == 8 ? '清空键恢复出厂设置' : '';
                    Object.assign(newData, {
                        msg: warnType,
                        type: 9,
                        backgroundImage: 2
                    })

                } else if (data.substr(0, 4) == '2106') { //门锁重置
                    Object.assign(newData, {
                        msg: '门锁重置',
                        type: 9,
                        backgroundImage: 2
                    })
                }
                Object.assign(newData, {
                    'log_date': moment(change.get("log_time")).format('YYYY-MM-DD'),
                    'log_time': moment(change.get("log_time")).format('hh:mm')
                })
                return newData
            }
        }
    }
</script>

<style scoped>
    .logData > .banner {
        width: 100vw;
        min-height: 10vh;
        background: url(../../assets/log01.png) no-repeat center top;
        background-size: 100% 100%;
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .logData > .banner > .title {
        font-size: 12px;
        margin: 5vw;
    }

    .logData > .logList > .flex {
        width: 100vw;
        min-height: 5vh;
        margin-top: 8px;
        display: flex;
        justify-content: center;
        line-height: 5vh;
    }

    /**日志样式*/
    .logData > .logDate > .time{
        margin-top: 4%;
        font-size: 11px;
    }
    .logData > .logDate > .logList{
        margin-left: 5%;
    }
    .logData > .logDate > .logList > .flex > .button {
        margin-top: 2.5%;
        width: 90vw;
        height: 5vh;
        display: flex;
        justify-content: space-between;
    }

    .logData > .logDate > .logList > .flex > .buttonWhite {
        background: url(../../assets/log02.png) no-repeat;
        background-size: 100% 100%;
        font-size: 12px;
    }

    .logData > .logDate > .logList > .flex > .buttonRed {
        background: url(../../assets/log03.png) no-repeat;
        background-size: 100% 100%;
        color: #fff;
        font-size: 12px;
    }

    .logData > .logDate > .logList > .flex > .button > .left {
        height: 5vh;
        display: flex;
        align-items: center;
    }

    .logData > .logDate > .logList > .flex > .button > .left > .img {
        width: auto;
        height: 100%;
    }

    .logData > .logDate > .logList > .flex > .button > .right {
        margin-right: 10px;
        display: flex;
        align-items: center;
        font-size: 12px;
    }
</style>
